<%@page import="java.util.List"%>
<%@page import="pojo.Item"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Metro Fit - Services</title>

    <!-- load stylesheets -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">  <!-- Google web font "Open Sans" -->
    <link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">                <!-- Font Awesome -->
    <link rel="stylesheet" href="css/bootstrap.min.css">                                      <!-- Bootstrap style -->
    <link rel="stylesheet" href="css/magnific-popup.css">                                 <!-- Magnific popup style (http://dimsemenov.com/plugins/magnific-popup/) -->
    <link rel="stylesheet" href="css/templatemo-style.css">                                   <!-- Templatemo style -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
          <![endif]-->
</head>

    <body>
        <!-- Header gallery -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <section class="tm-header-gallery">
                        
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
                            <a href="img/img-11-05.jpg">
                                <img src="img/img-11-05.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">    
                            </a>
                            <a href="img/img-11-02.jpg">
                                <img src="img/img-11-02.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">    
                            </a>                        
                        </div>
                        
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
                            
                            <div class="tm-site-name">
                                <h1 class="text-uppercase tm-site-name-h1">Metro Fit</h1>
                                <h2 class="tm-site-name-h2">by templatemo</h2>    
                            </div>
                            
                            <img src="img/logo-bg.jpg" alt="Image" class="img-fluid tm-header-img">
                        </div>
                                        
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
                            <a href="img/img-11-01.jpg">
                                <img src="img/img-11-01.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">    
                            </a>
                            <a href="img/img-11-06.jpg">
                                <img src="img/img-11-06.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">        
                            </a>                        
                        </div>                

                    </section>
                </div>
            </div>                
            
            
            
            <div class="row tm-tabs-container">
                <div class="tm-tab-links-col">
                    <nav>
                        <ul class="tm-tabs">
                            <li class="tm-tab-link-item">
                                <a id="tab1" href="javascript:void(0)" class="tm-tab-link active">
                                    <i class="fa fa-music tm-tab-icon"></i>
                                    <div class="tm-tab-link-label">Tab Section First</div>
                                </a>
                            </li>

                            <li class="tm-tab-link-item">
                                <a id="tab2" href="javascript:void(0)" class="tm-tab-link">
                                    <i class="fa fa-users tm-tab-icon"></i>
                                    <span class="tm-tab-link-label">Second Tab Title</span>
                                </a>
                            </li>

                            <li class="tm-tab-link-item">
                                <a id="tab3" href="javascript:void(0)" class="tm-tab-link">
                                    <i class="fa fa-heart tm-tab-icon"></i>
                                    <span class="tm-tab-link-label">Third Section Tab</span>
                                </a>
                            </li>

                            <li class="tm-tab-link-item">
                                <a id="tab4" href="javascript:void(0)" class="tm-tab-link">
                                    <i class="fa fa-microphone tm-tab-icon"></i>
                                    <span class="tm-tab-link-label">Title Fourth comes up</span>
                                </a>
                            </li>

                            <li class="tm-tab-link-item">
                                <a id="tab5" href="javascript:void(0)" class="tm-tab-link">
                                    <i class="fa fa-globe tm-tab-icon"></i>
                                    <span class="tm-tab-link-label">Fifth Title goes here</span>
                                </a>
                            </li>
                            
                        </ul>
                    </nav>
                </div>
                <div class="tm-tab-content-box-col">
                    <div id="tab1C" class="tm-tab-content-box">
                        <img src="img/img-11-04.jpg" alt="Image" class="img-fluid tm-tab-content-img">
                        
                        <div class="tm-tab-content-text">
                            <p>You can <strong>easily</strong> change <a rel="nofollow" href="http://fontawesome.io/icons/" target="_blank">Font Awesome icons</a> in HTML codes. Feel free to modify and use this layout for your websites. Nunc elementum enim nec justo ornare mollis. Sed facilisis urna vitae lectus maximus, scelerisque aliquet ligula cursus.</p>
                            <ul class="tm-ul-plus">
                                <li>Vestibulum ullamcorper et lectus</li>
                                <li>Donec efficitur placer magna</li>
                                <li>Praesent venenatis diam pellentesque</li>
                                <li>Nunc consequat nulla vel ipsum</li>
                            </ul>
                        </div>                        
                    </div>

                    

</body>
</html>
